<template>
    <van-nav-bar title="Vue家具商城" />

    <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in HotData" :key="item.id" @click="ToProductInfo(item.id)">
            <van-image
                width="100%"
                height="150px"
                fit="cover"
                :src="item.thumb_text"
            />
        </van-swipe-item>
    </van-swipe>

    <van-grid :border="false" :column-num="4">
        <van-grid-item to="/product" text="全部商品">
            <template #icon>
                <van-image
                    width="50"
                    height="50"
                    src="/assets/images/quanbu.png"
                />
            </template>
        </van-grid-item>
        <van-grid-item text="商品直播">
            <template #icon>
                <van-image
                    width="50"
                    height="50"
                    src="/assets/images/zhibo.png"
                />
            </template>
        </van-grid-item>
        <van-grid-item to="/coupon" text="优惠活动">
            <template #icon>
                <van-image
                    width="50"
                    height="50"
                    src="/assets/images/youhui.png"
                />
            </template>
        </van-grid-item>
        <van-grid-item to="/product/rank" text="榜单排行">
            <template #icon>
                <van-image
                    width="50"
                    height="50"
                    src="/assets/images/bangdan.png"
                />
            </template>
        </van-grid-item>
    </van-grid>

    <div class="type">新品推荐</div>

    <div class="list">
        <div class="item" v-for="item in NewData" :key="item.id">
            <router-link
                :to="{ path: '/product/info', query: { proid: item.id } }"
            >
                <div class="thumb">
                    <van-image
                        width="100%"
                        height="150px"
                        fit="cover"
                        :src="item.thumb_text"
                    />
                </div>
                <div class="name">{{ item.name }}</div>
                <div class="box">
                    <div class="price">
                        <span v-if="item.live_price > 0"
                            >￥{{ item.live_price }}</span
                        >
                        <span :class="item.live_price ? 'product_price' : ''"
                            >￥{{ item.price }}</span
                        >
                    </div>
                    <div class="buy-count">{{ item.buy_count }}人付款</div>
                </div>
                <div class="box">
                    <div class="region">{{ item.region_text }}</div>
                    <div class="chat">
                        <van-icon name="chat-o" color="#ff5000" size="16" />
                    </div>
                </div>
            </router-link>
        </div>
    </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

// 新品的商品数据
const NewData = ref([]);
// 热销的商品数据
const HotData = ref([]);

onBeforeMount(() =>
{
    GetHome();
});

const GetHome = async () =>
{
    const result = await proxy.$http.post('/index/index');

    if(result.code === 1)
    {
        NewData.value = result.data.NewData;
        HotData.value = result.data.HotData;
    }
}

const ToProductInfo = (proid) => proxy.$router.push({path:'/product/info',query:{proid}})
</script>

<style scoped>
@import url('/assets/css/home.css');
</style>
